﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
<script type="text/javascript" src="../js/jQuery1.7.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
<script type="text/javascript"  src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/icheck.min.js"></script>
<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',  // 注意square和blue的对应关系,用于type=checkbox
    radioClass: 'iradio_square-blue', // 用于type=radio
    increaseArea: '20%' // 增大可以点击的区域
  });
});
</script>
</head>

<body>
<div class="inquiry">
  <form class="layui-form" action="">
    <div id="brandList">
        <div class="button-Orange"><a href="#"><i class="button-icos"><img src="../images/ico/search-ico.png"/></i> <span>搜索</span></a></div>
          <ul class="con">
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">计费对象名称：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" />
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">计费对象代码：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" />
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">计费对象类别：</label>
                <div class="layui-input-inline" style="width:150px;">
                  <select name="quiz1">
                    <option>请选择</option>
                  </select>
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">行政区划：</label>
                <div class="layui-input-inline" style="width:100px;">
                  <select name="quiz1">
                    <option >请选择</option>
                    <option  selected="selected">省</option>
                    <option >小类</option>
                  </select>
                </div>
                <div class="layui-input-inline" style="width:100px;margin-left:-1px;">
                  <select name="quiz2">
                    <option >请选择</option>
                    <option  selected="selected">市</option>
                    <option >小类</option>
                  </select>
                </div>
                <div class="layui-input-inline" style="width:100px;margin-left:-1px;">
                  <select name="quiz2">
                    <option >请选择</option>
                    <option  selected="selected">县</option>
                    <option >小类</option>
                  </select>
                </div>
              </div>
            </li>
             <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单费用起始年月：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" onclick="layui.laydate({elem: this, festival: true})"/>
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单费用终止年月：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" onclick="layui.laydate({elem: this, festival: true})"/>
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单生成时间：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" onclick="layui.laydate({elem: this, festival: true})"/>
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单金额最小值：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" />
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单金额最大值：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" />
                </div>
              </div>
            </li>
            <li>
              <div class="layui-form-item">
                <label class="layui-form-label">账单编号：</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" />
                </div>
              </div>
            </li>
          </ul>
        
         <div id="showMore"> <a href="#"> <span class="hide"></span> </a> </div>
          <div class="line"></div>
    </div>
  </form>
</div>
<div class="datail">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="site-table table-hover" >
    <thead>
      <tr>
        <th width="2%"> <input type="checkbox" name="checkbox" id="checkbox" /></th>
        <th width="20%">账单编号</th>
        <th width="20%">账单期数</th>
        <th width="20%">账单金额</th>
        <th width="20%">账单费用起始时间</th>
        <th width="20%">账单费用终止时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
       <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
       <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
       <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr class="td-colr">
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td>NA64021966</td>
        <td>2014年7月</td>
        <td>200</td>
        <td>2014/11/12</td>
        <td>2014/11/12</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="operating">
  <div class="btn">
    <div class="button"><a href="#">
      <div class="button-ico"><img src="../images/ico/btn-ico-03.png"/></div>
      <span>查看</span></a></div>
  </div>
  <div class="pages">
    <div id="demo2"></div>
  </div>
</div>
<script type="text/javascript" src="../layui/layui.js"></script> 
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
});

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  laypage({
    cont: 'demo2'
    ,pages: 20
    ,skin: '#1E9FFF'
  });
  
});
$('.site-table tbody tr').on('click', function(event) {
  var $this = $(this);
   var $input = $this.children('td').eq(0).find('input');
       $input.on('ifChecked', function(e) {
       $this.css('background-color', '#EEEEEE');
    });
       $input.on('ifUnchecked', function(e) {
       $this.removeAttr('style');
    });
	})
</script>
</body>
</html>
